<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>表单HTML</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <link href="../lib/mavonEditor/dist/css/index.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    
    <style type="text/css">
      [v-cloak] { display: none }
      .bd-light { border: 1px solid rgba(0, 0, 0, .1) }
      div.q-if-inner div.q-input-target {line-height: 24px} 
    </style>
  </head>
  <body>
    <div id="q-formHtml" v-cloak class="q-pa-sm">
      <q-card class="bg-white no-shadow full-width">
        <q-card-main class="bd-light">
          <q-table
            class="no-shadow"
            :data="data"
            dense
            :columns="columns"
            :visible-columns="visibleColumns"
            :rows-per-page-options="[5, 10, 20]"
            selection="multiple"
            :loading = "listLoading"
            :selected.sync="selected"
            :pagination.sync="serverPagination"
            @request="getList"
            row-key="id"
          >
            <template slot="top-right" slot-scope="props">
              <q-table-columns
                style="width:66px"
                color="secondary"
                class="q-mr-sm"
                :label="$t('展示项')"
                v-model="visibleColumns"
                :columns="columns"
              ></q-table-columns>
              <q-btn 
                flat
                no-ripple
                label="搜索项">
                <q-icon 
                  name="arrow_drop_down" 
                  color="grey" 
                  size="24px"></q-icon>
                <q-popover class="q-pa-md">
                  <div style="width:300px" class="row justify-end gutter-md q-px-sm">
                    <q-field 
                      style="width:300px">
                      <q-input
                        :float-label="$t('表单名称')"
                        :after="searchIcon"
                        v-model.trim="searchForm.search_LIKE_name"></q-input>
                    </q-field>
                  </div>
                </q-popover>
              </q-btn>
              <q-btn
                flat round dense
                :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                @click="props.toggleFullscreen"
              ></q-btn>
            </template>
            <template slot="top-left" slot-scope="props">
              <q-btn
                color="secondary"
                flat
                @click="openAddModal"
                :label="$t('新增')"
                class="q-mr-sm" ></q-btn>
              <q-btn
                color="negative"
                flat
                :label="$t('删除')"
                @click="deleteComfirm"></q-btn>
            </template>
            <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
              第
              <q-pagination
                v-model="serverPagination.page"
                input
                boundary-links
                direction-links
                color="secondary"
                :max-pages="5"
                :ellipses="true"
                :max="pages"></q-pagination>
              页 &nbsp; 共 {{ total }} 条
            </div>
            <template slot="body" slot-scope="props">
              <q-tr
                :props="props"
              >
                <q-td >
                  <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                </q-td>
                <q-td key="action" :props="props" >
                  <q-checkbox
                    color="primary"
                    v-model="props.expand"
                    checked-icon="keyboard_arrow_up"
                    unchecked-icon="keyboard_arrow_down"
                    class="q-mr-sm"></q-checkbox>
                  <q-btn
                    flat
                    round
                    size="xs"
                    @click="openEditModal(props.row)"
                    color="secondary"
                  >
                    <q-icon name="edit" size="16px"></q-icon>
                  </q-btn>
                  <q-btn
                    flat
                    round
                    size="xs"
                    @click="deleteRowComfirm(props.row)"
                    color="negative"
                    >
                    <q-icon name="delete" size="16px"></q-icon>
                  </q-btn>
                </q-td>
                <q-td
                  key="name"
                  :props="props">{{ props.row.name }}</q-td>
                <q-td
                  key="qlexpressContent"
                  :props="props">{{ props.row.qlexpressContent }}</q-td>
                <q-td
                  key="createTime"
                  :props="props">{{ props.row.createTime }}</q-td>
                <q-td
                  key="lastUpdateTime"
                  :props="props">{{ props.row.lastUpdateTime }}</q-td>
                <q-td
                  key="createUserName"
                  :props="props">{{ props.row.createUserName }}</q-td>
                <q-td
                  key="updateUserName"
                  :props="props">{{ props.row.updateUserName }}</q-td>
              </q-tr>
              <!-- 展开行 -->
              <q-tr v-show="props.expand" :props="props">
                <q-td colspan="100%">
                  <editor-look
                    :content="props.row.content" 
                    :height="300" 
                    ref="editor"></editor-look>
                </q-td>
              </q-tr>
            </template>
          </q-table>
          <q-modal no-backdrop-dismiss v-model="addOrEditModal" :content-css="{minWidth: '90vw', minHeight: '85%',borderRadius: '4px'}">
            <q-modal-layout>
              <q-toolbar slot="header" color="white">
                <q-toolbar-title class="text-dark">
                  {{ addOrEdit === 0 ? $t("新增") : $t("编辑")  }}
                </q-toolbar-title>
                <q-btn flat @click="addOrEditModal = false">
                  <q-icon name="close" color="dark"></q-icon>
                </q-btn>
              </q-toolbar>
              <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
                <q-card-main class="row gutter-x-md gutter-y-sm">
                  <q-field 
                    :error="$v.addOrEditForm.name.$error"
                    error-label="表单名称不能为空"
                    class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('表单名称')"
                      @blur="$v.addOrEditForm.name.$touch"
                      v-model="addOrEditForm.name"></q-input>
                  </q-field>
                  <q-field 
                    :error="$v.addOrEditForm.qlexpressContent.$error"
                    error-label="表单规则不能为空"
                    class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('表单规则')"
                      @blur="$v.addOrEditForm.qlexpressContent.$touch"
                      v-model="addOrEditForm.qlexpressContent"></q-input>
                  </q-field>
                  <q-field 
                    class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <editor-edit
                      style="z-index:19999" 
                      :content="addOrEditForm.content" 
                      @change="updateContent"
                      :height="300" 
                      ref="editor"></editor-edit>
                  </q-field>
                </q-card-main>
              </q-card>
              <q-toolbar slot="footer" color="white" class="row justify-end">
                <q-btn
                  flat
                  color="primary"
                  @click="addOrEditModal = false">{{$t("取消")}}</q-btn>
                <q-btn
                  flat
                  :loading="btnLoading"
                  color="primary"
                  v-if="addOrEdit === 0"
                  @click="saveAddHandler">{{$t("保存")}}</q-btn>
                <q-btn
                  flat
                  :loading="btnLoading"
                  color="primary"
                  v-if="addOrEdit === 1"
                  @click="saveEditHandler">{{$t("保存")}}</q-btn>
              </q-toolbar>
            </q-modal-layout>
          </q-modal>
        </q-card-main>
      </q-card>
    </div>
  
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sop/formHtml.js"></script>
    <!-- editor  -->
    <script src="../lib/vue-html5-editor/dist/vue-html5-editor.js"></script>
   
    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
      // 全局引用
      // Vue.use(VueHtml5Editor, { hiddenModules: ['info'], language: 'zh-cn' })
      // 单个示例引用
      var EditorEdit = new VueHtml5Editor({ hiddenModules: ['info'], language: 'zh-cn' })
      var EditorLook = new VueHtml5Editor({ hiddenModules: ['info',"text","color","font","align","list","link","unlink","tabulation","image","hr","eraser","undo",], language: 'zh-cn' })
      
      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
      var email = window.validators.email
      
      var formHtml = new Vue({
        el: '#q-formHtml',
        i18n: i18n,
        components: {
          EditorEdit: EditorEdit,
          EditorLook: EditorLook
        },
        data: function () {
          return {
            isShowSearch: false,
            // 查询
            searchForm: {
              search_LIKE_name: ''
            },
            isShowMoreSearch: false,
            // 表格数据
            data: [],
            total: 0,
            // 分页
            serverPagination: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 5
            },
            // 可见的列
            visibleColumns: [
              'action',
              'name',
              'qlexpressContent',
              'createTime',
              'lastUpdateTime',
              'createUserName',
              'updateUserName'
            ],
            listLoading: false,
            btnLoading: false,
            selected: [],
            addOrEdit: 1,  // 1 编辑 0 新增
            addOrEditModal: false,
            addOrEditForm: {
              name: '',
              qlexpressContent: '',
              content: ''
            },
            editId: '',
            fontsOptions: {
              arial: 'Arial',
              arial_black: 'Arial Black',
              comic_sans: 'Comic Sans MS',
              courier_new: 'Courier New',
              impact: 'Impact',
              lucida_grande: 'Lucida Grande',
              times_new_roman: 'Times New Roman',
              verdana: 'Verdana'
            },
            editorOptions: {

            },
            editor: ''
          }
        },
        validations: {
          addOrEditForm: {
            name: { required: required },
            qlexpressContent: { required: required },
            content: { required: required }
          }
        },
        computed: {
          // 表格配置
          columns: function() {
            return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'center'
              },
              {
                name: 'name',
                label: this.$t('表单名称'),
                align: 'left',
                field: 'name',
                sortable: true
              },
              {
                name: 'qlexpressContent',
                label: this.$t('表单规则'),
                align: 'left',
                field: 'qlexpressContent'
              },
              {
                name: 'createTime',
                label: this.$t('创建时间'),
                align: 'left',
                field: 'createTime',
                sortable: true
              },
              {
                name: 'lastUpdateTime',
                label: this.$t('最后更新时间'),
                align: 'left',
                field: 'lastUpdateTime',
                sortable: true
              },
              {
                name: 'createUserName',
                label: this.$t('创建人'),
                align: 'left',
                field: 'createUserName'
              },
              {
                name: 'updateUserName',
                label: this.$t('最后更新人'),
                align: 'left',
                field: 'updateUserName'
              }
            ]
          },
          searchIcon: function() {
            var that = this
            return [
              {
                icon: 'search',
                handler: function() {
                  that.getList({ pagination: that.serverPagination })
                }
              },
              {
                icon: 'clear',
                handler: function() {
                  that.searchForm = {
                    search_LIKE_form: ''
                  }
                  that.getList({ pagination: that.serverPagination })
                }
              }
            ]
          },
          pages: function() {
            return Math.ceil(this.total / this.serverPagination.rowsPerPage)
          }
        },
        created: function () {
          // vue-i18n
          this.$i18n.locale = LANGUGE
          this.getList({
            pagination: this.serverPagination
          })
          if (this.$q.cookies.has('formHtml_visible_columns')) {
            this.visibleColumns = this.$q.cookies.get('formHtml_visible_columns')
          }
        },
        mounted: function() {
          // this.editor = UE.getEditor('contentCon')
        },
        watch: {
          'serverPagination.page': function (page) {
            this.getList({
              pagination: this.serverPagination
            })
          },
          'addOrEditForm.content': function(content) {
            console.log(content, 'addOrEditForm.content');
          },
          visibleColumns: function (visibleColumns) {
            this.$q.cookies.set('formHtml_visible_columns', this.visibleColumns, {
              expires: 30,
              domian: COOKIES_DOMIAN,  // 这里替换域名
              path: COOKIES_PATH  // 设置目录
            })
          }
        },
        methods: {
          getList: function (arg) {
            this.listLoading = true
            this.serverPagination = arg.pagination
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/formHtmlNew',
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : null),
                search_LIKE_name: this.searchForm.search_LIKE_name
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.data = data.rows
                that.total = data.total
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
              that.listLoading = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          openAddModal: function () {
            this.addOrEditForm = {
              name: '',
              qlexpressContent: '',
              content: ''
            }
            this.$v.addOrEditForm.$reset()
            this.addOrEdit = 0
            this.addOrEditModal = true
          },
          openEditModal: function (arg) {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/formHtmlNew/byId',
              data: {
                id: arg.id
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.addOrEdit = 1
                that.addOrEditForm = {
                  name: data.single.name,
                  qlexpressContent: data.single.qlexpressContent,
                  content: data.single.content
                }
                that.addOrEditModal = true
                that.editId = data.single.id
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 单行删除
          deleteRowComfirm: function (row) {
            var that = this
            this.$q.dialog({
              title: this.$t('确认')+'？',
              message: this.$t('您确定要删除该条信息吗')+'？',
              ok: {
                label: this.$t('确认'),
                flat: true
              },
              cancel: {
                label: this.$t('取消'),
                flat: true
              }
            })
            .then(function() {
              axios({
                method: 'post',
                url: '/manager/new/formHtmlNew/deleteFormHtmlNew',
                data: {
                  ids: row.id,
                  type: 1
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: '删除成功!',
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.getList({ pagination: that.serverPagination })
              })
              .catch(function(err) {
                console.log(err)
              })
            })
            .catch(function() {
              // 选择"Cancel"或作了关闭操作
            })
          },
          // 批量删除
          deleteComfirm: function () {
            var idSelected = []
            this.selected.forEach(function(e) {
              idSelected.push(e.id)
            })
            var that = this
            if (this.selected.length > 0) {
              this.$q.dialog({
                title: '确认删除？',
                message: '确认要删除选中的'+ this.selected.length + '条数据吗？',
                ok: {
                  label: '确认',
                  flat: true
                },
                cancel: {
                  label: '取消',
                  flat: true
                }
              })
              .then(function() {
                axios({
                  method: 'post',
                  url: '/manager/new/formHtmlNew/deleteFormHtmlNew',
                  data: {
                    ids: idSelected.join(','),
                    type: 1
                  }
                })
                .then(function(data) {
                  if (data.statusCode == 200) {
                    that.$q.notify({
                      message: '删除成功!',
                      icon: 'done',
                      type: 'positive',
                      position: 'top-right'
                    })
                    that.selected = []
                  } else if (data.statusCode == 201) {
                    that.$q.notify({
                      message: '部分删除成功!失败条数：' + data.rowsStatusCode.length,
                      icon: 'done',
                      type: 'positive',
                      position: 'top-right'
                    })
                  } else {
                    that.$q.notify({
                      message: that.$t(STATUS_CODE[data.statusCode]),
                      icon: 'error_outline',
                      type: 'negative',
                      position: 'top-right'
                    })
                  }
                  that.getList({ pagination: that.serverPagination })
                })
                .catch(function(err) {
                  console.log(err)
                })
              })
              .catch(function() {
                // 选择"Cancel"或作了关闭操作
              })
            } else {
              this.$q.notify({
                message: '请勾选您要删除的内容',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          // 新增
          saveAddHandler: function () {
            this.$v.addOrEditForm.$touch()
            if (this.$v.addOrEditForm.content.$error) {
              this.$q.notify({
                message: this.$t('表单内容不能为空'),
                icon: 'warning',
                type: 'warning',
                position: 'top-right'
              })
            }
            if (!this.$v.addOrEditForm.$error) {
              this.btnLoading = true
              var that = this
              axios({
                method: 'post',
                url: '/manager/new/formHtmlNew/addFormHtmlNew',
                data: {
                  name: this.addOrEditForm.name,
                  qlexpressContent: this.addOrEditForm.qlexpressContent,
                  content: this.addOrEditForm.content
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: that.$t('新增成功'),
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.addOrEditModal = false
                that.getList({ pagination: that.serverPagination })
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          },
          saveEditHandler: function () {
            this.$v.addOrEditForm.$touch()
            if (this.$v.addOrEditForm.content.$error) {
              this.$q.notify({
                message: this.$t('表单内容不能为空'),
                icon: 'warning',
                type: 'warning',
                position: 'top-right'
              })
            }
            if (!this.$v.addOrEditForm.$error) {
              var that = this
              this.btnLoading = true
              axios({
                method: 'post',
                url: '/manager/new/formHtmlNew/updateFormHtmlNew',
                data: {
                  id: this.editId,
                  name: this.addOrEditForm.name,
                  qlexpressContent: this.addOrEditForm.qlexpressContent,
                  content: this.addOrEditForm.content
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: '编辑成功',
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.addOrEditModal = false
                that.getList({ pagination: that.serverPagination })
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          },
          updateContent: function(content) {
            this.addOrEditForm.content = content
          }
        }
      })
    </script>
  </body>
</html>
